<template>
  <div class="home" v-if="category">
    <nav-bar></nav-bar>
    <div class="categorytab">
      <div class="category-ico" @click="$router.push('/editcategory')">
        <van-icon name="setting-o" />
      </div>
      <van-tabs v-model="active" swipeable sticky animated>
        <van-tab v-for="(item, index) in category" :key="index" :title="item.title">
          <van-list
            v-model="item.loading"
            :immediate-check="false"
            :finished="item.finished"
            finished-text="我也是有底线的"
            @load="onLoad"
          >
            <div class="detailparent">
              <cover
                class="detailitem"
                :detailitem="categoryitem"
                v-for="(categoryitem,categoryindex) in item.list"
                :key="categoryindex"
              ></cover>
            </div>
          </van-list>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import navBar from '@/components/common/navBar.vue'
import cover from './cover'
export default {
  data() {
    return {
      category: [],
      active: 0
    }
  },
  components: {
    navBar,
    cover
  },
  created() {
    this.selectCategory()
  },
  activated() {
    if (localStorage.getItem('newCat')) {
      const newCat = JSON.parse(localStorage.getItem('newCat'))
      this.category = this.changeCategory(newCat)
      this.selectArticle()
    }
  },
  methods: {
    async selectCategory() {
      if (localStorage.getItem('newCat')) {
        const newCat = JSON.parse(localStorage.getItem('newCat'))
        this.category = this.changeCategory(newCat)
        this.selectArticle()
        return
      }
      const res = await this.$http.get('/category')
      this.category = this.changeCategory(res.data)
      this.selectArticle()
    },
    changeCategory(data) {
      const _category = data.map((item, idnex) => {
        item.list = []
        item.page = 0
        item.finished = false
        item.loading = true
        item.pagesize = 10
        return item
      })
      return _category
    },
    async selectArticle() {
      const categoryitem = this.categoryitem()
      const res = await this.$http.get('/detail/' + categoryitem._id, {
        params: {
          page: categoryitem.page,
          pagesize: categoryitem.pagesize
        }
      })
      categoryitem.list.push(...res.data)
      categoryitem.loading = false
      if (res.data.length < categoryitem.pagesize) {
        categoryitem.finished = true
      }
    },
    onLoad() {
      const categoryitem = this.categoryitem()
      setTimeout(() => {
        categoryitem.page += 1
        this.selectArticle()
      }, 1000)
    },
    categoryitem() {
      const categoryitem = this.category[this.active]
      return categoryitem
    }
  },
  watch: {
    active() {
      const categoryitem = this.categoryitem()
      if (!categoryitem.list.length) {
        this.selectArticle()
      }
    }
  }
}
</script>

<style lang="less" scoped>
.home {
  background-color: white;
}
.detailparent {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  .detailitem {
    margin: 1.389vw 0;
    width: 45%;
  }
}
.categorytab {
  position: relative;
  .category-ico {
    position: absolute;
    z-index: 5;
    right: 0;
    top: 1.944vw;
    padding: 1.389vw 2.778vw;
    background-color: white;
  }
}
</style>
